<template>
  <view class="container">
    <view class="title"> 身份证照片 </view>
    <view class="subtitle"> 请上传身份证照片、仅用于{{ $tokenName }}提现 </view>
    <view class="pic-container">
      <view
        class="pic"
        @click="toTackPhoto(0)">
        <image
          :src="
            realInfo.frontUrl === '' ? '/static/my/font.png' : realInfo.frontUrl
          "
          mode="aspectFill"></image>
      </view>
      <view
        class="pic"
        @click="toTackPhoto(1)">
        <image
          :src="
            realInfo.backUrl === '' ? '/static/my/back.png' : realInfo.backUrl
          "
          mode="aspectFill"></image>
      </view>
    </view>
    <view class="btn">
      <button
        type="primary"
        @click="toUserInfo">
        下一步
      </button>
    </view>
    <uni-popup
      ref="popup"
      type="center">
      <view class="pop">
        <view class="inner">
          <view class="title"> 确认信息 </view>
          <view class="ipt">
            <input
              type="text"
              v-model="realInfo.certNo"
              placeholder="身份证号" />
          </view>
          <view class="ipt">
            <input
              type="text"
              v-model="realInfo.name"
              placeholder="姓名" />
          </view>
          <view class="btn">
            <button @click="toRealNameRegister">保存</button>
            <button @click="cancle">取消</button>
          </view>
        </view>
      </view>
    </uni-popup>
    <canvas
      class="canvas"
      v-if="isCanvasShow"
      :style="'width:' + canvasWidth + 'px;height:' + canvasHeight + 'px;'"
      canvas-id="myCanvas"
      :width="canvasWidth"
      :height="canvasHeight"
      id="myCanvas"></canvas>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { fileUpload } from '@/apis/uni-fetch.js'
  import { reqRealNameRegister } from '@/apis/my.js'
  export default {
    data() {
      return {
        // 身份证正面照
        memberId: '',
        tempUrl: '',
        access_token: '',
        canvasWidth: 0,
        canvasHeight: 0,
        canvas: null,
        isCanvasShow: false
      }
    },
    onLoad(options) {
      this.canvas = uni.createCanvasContext('myCanvas', this)
      this.memberId = this.$store.getters.userInfo.id
      if (options.tempPath) {
        this.tempUrl = options.tempPath
        console.log('拍照识别的路径', this.tempUrl)
        this.type = options.type
        this.OCRImg()
      }
    },
    computed: {
      ...mapGetters('realName', ['realInfo'])
    },
    methods: {
      async toRealNameRegister() {
        let { memberId } = this
        let {
          frontUrl,
          certNo,
          name,
          backUrl,
          certValidityType,
          certEndDate,
          certBeginDate
        } = this.realInfo
        let res = await reqRealNameRegister({
          memberId,
          frontUrl,
          certNo,
          name,
          backUrl,
          certValidityType,
          certEndDate,
          certBeginDate
        })
        if (res.code === 200) {
          uni.showToast({
            title: '认证成功，即将绑定银行卡',
            icon: 'success'
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/bankCard/index'
            })
          }, 1500)
        } else {
          uni.utils.toast(res.message)
        }
      },
      async OCRImg(file) {
        this.$store.dispatch('realName/handlerImg', {
          type: this.type,
          tempUrl: this.tempUrl
        })
      },
      toTackPhoto(type) {
        // uni.redirectTo({
        // 	url: '/packageB/pages/takePhoto/takePhoto?' + 'type=' + type,
        // })
        uni.showActionSheet({
          itemList: ['从相册中选择'], // 选择方式
          success: (res) => {
            // if(res.tapIndex == 1){
            // 	uni.redirectTo({
            // 		url: '/pages/takePhoto/takePhoto?' + 'type=' + type,
            // 	})
            // }else {
            console.log('选择图片')
            uni.chooseImage({
              mediaType: ['image'],
              count: 1,
              sourceType: ['album'],
              success: async (res1) => {
                // this.OCRImg();
                console.log(res1, '111111')
                if (res1.errMsg == 'chooseImage:ok') {
                  this.tempUrl = res1.tempFilePaths[0]
                  console.log(11111, this.tempUrl)
                  uni.getImageInfo({
                    src: this.tempUrl,
                    success: async (res2) => {
                      if (res2.width > res2.height) {
                        this.type = type
                        console.log('调用上传图片1')
                        this.OCRImg()
                      } else {
                        this.isCanvasShow = true
                        await new Promise((resolve) => {
                          this.canvasWidth = res2.height
                          this.canvasHeight = res2.width
                          resolve()
                        })
                        // this.canvasWidth = res2.height;
                        // this.canvasHeight = res2.width;
                        // setTimeout(()=>{
                        this.canvas.rotate((-90 * Math.PI) / 180)
                        this.canvas.drawImage(
                          this.tempUrl,
                          -res2.width,
                          0,
                          res2.width,
                          res2.height
                        )
                        this.canvas.draw()
                        setTimeout(() => {
                          uni.canvasToTempFilePath({
                            canvasId: 'myCanvas',
                            x: 0,
                            y: 0,
                            quality: 1,
                            width: res2.height * 2,
                            height: res2.width * 2,
                            destWidth: res2.height * 2,
                            destHeight: res2.width * 2,
                            success: (res3) => {
                              // console.log(res3,'裁剪')
                              this.tempUrl = res3.tempFilePath
                              this.isCanvasShow = false
                              this.type = type
                              console.log('调用上传图片2')
                              this.OCRImg()
                              console.log('上传成功')
                            }
                          })
                        }, 400)
                        // },400)
                      }
                    }
                  })
                }
              }
            })
            // }
          }
        })
      },
      toUserInfo() {
        if (this.realInfo.frontOK && this.realInfo.backOK) {
          this.$refs.popup.open()
        } else {
          uni.utils.toast('请填写完整的信息')
        }
      },
      cancle() {
        this.$refs.popup.close()
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f7f7f7;
  }

  .container {
    padding: 20rpx 20rpx;
    .title {
      margin-bottom: 20rpx;
      font-size: 40rpx;
      color: #1a1a1a;
      font-weight: bold;
      padding-left: 20rpx;
    }

    .subtitle {
      margin-bottom: 20rpx;
      padding-left: 20rpx;
      font-size: 28rpx;
      color: #666;
    }

    .pic-container {
      background-color: #fff;
      padding: 40rpx 20rpx;
      border-radius: 8rpx;
      width: 100%;
      margin-bottom: 20rpx;

      .pic {
        width: 670rpx;
        height: 394rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .pic:nth-child(1) {
        margin-bottom: 40rpx;
      }
    }

    .btn {
      width: 100%;
      display: flex;
      justify-content: center;
      height: 88rpx;

      /deep/ button {
        width: 332rpx !important;
        height: 88rpx !important;
        background-color: #2f64ff !important;
        color: #fff;
        border-radius: 16rpx;
      }
    }
    .canvas {
      margin-top: 500rpx;
    }
    .pop {
      padding: 20rpx 20rpx;
      width: 600rpx;
      border-radius: 20rpx;
      background-color: #fff;

      .inner {
        padding: 40rpx 20rpx;

        .title {
          color: #1a1a1a;
          font-weight: bold;
          margin-bottom: 20rpx;
          font-size: 32rpx;
          text-align: center;
        }

        .ipt {
          margin-bottom: 30rpx;
          border-bottom: 1rpx solid #999;

          input {
            height: 80rpx;
            margin-bottom: 20rpx;
          }
        }

        .btn {
          width: 100%;
          display: flex;
          justify-content: space-around;
          height: 88rpx;

          /deep/ button {
            width: 200rpx !important;
            height: 60rpx !important;
            line-height: 60rpx;
            background-color: #2f64ff !important;
            color: #fff;
            border-radius: 16rpx;
          }

          /deep/ button:nth-child(2) {
            width: 200rpx !important;
            height: 60rpx !important;
            line-height: 60rpx;
            background-color: #999 !important;
            color: #fff;
            border-radius: 16rpx;
          }
        }
      }
    }
  }
</style>
